<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layout 后台大布局 - Layui</title>
        <link rel="stylesheet" href="../../layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">layui 后台布局</div>
                <!-- 头部区域（可配合layui已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item"><a href="javascript:;">控制台</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">用户</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">其它系统</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">邮件管理</a></dd>
                            <dd><a href="">消息管理</a></dd>
                            <dd><a href="">授权管理</a></dd>
                        </dl>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                            贤心
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">安全设置</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">退了</a></li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item">
                            <a class="" href="javascript:;">所有商品</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">列表一</a></dd>
                                <dd><a href="javascript:;">列表二</a></dd>
                                <dd><a href="javascript:;">列表三</a></dd>
                                <dd><a href="">超链接</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:;">解决方案</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;" lay-href="module/table.html">表格</a></dd>
                                <dd><a href="javascript:;" lay-href="iframe:module/from.html">URL传参</a></dd>
                                <dd><a href="javascript:;" lay-href="module/form.html">form字段</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
                        <li class="layui-nav-item"><a href="javascript:;">发布商品</a></li>
                    </ul>
                </div>
            </div>

            <div class="layui-body" style="overflow:hidden;">
                <!-- 内容主体区域 -->
                <div style="height:100%;">
                    <div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">首页</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div id="test123123123"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-footer">
                <!-- 底部固定区域 -->
                © layui.com - 底部固定区域
            </div>
        </div>
        <script src="../../layui/layui.js"></script>
        <script>
            //JavaScript代码区域
            layui.use(['element', 'util', 'laydate'], function() {
                var $ = layui.jquery;
                var element = layui.element;
                var util = layui.util;
                var laydate = layui.laydate;
                alert(123);
                var ins1 = laydate.render({
                    elem: '#test123123123',
                    mark: {
                        '0-10-14': '生日',
                        '0-12-31': '跨年' //每年12月31日
                            ,
                        '0-0-10': '工资' //每个月10号
                            ,
                        '2017-8-15': '' //具体日期
                            ,
                        '2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
                            ,
                        '2017-8-21': '发布'
                    },
                    done: function(value, date) {
                        //点击2017年8月15日，弹出提示语
                        if (date.year === 2017 && date.month === 8 && date.date === 15) { 
                            ins1.hint('中国人民抗日战争胜利72周年');
                        }
                    }
                });

                let active = {
                    aaa: function(p) {
                        alert(p);
                    }
                };

                util.event('lay-active', active);

                $('body').on('click', 'a[lay-href]', function(e, o) {
                    var title = $(this).text();
                    var url = $(this).attr('lay-href');

                    if (url.length) {
                        let isIframe = url.indexOf(':');
                        if (isIframe >= 0) {
                            let data = '<iframe width="100%" height="100%" frameborder="0" src="' + url
                                .split(':')[1] + '"></iframe>'; // 支持传入html
                            tabModify(title, data);
                        } else {
                            $.ajax({
                                type: 'get',
                                url: url,
                                dataType: 'html',
                                success: function(data) {
                                    tabModify(title, data);
                                }
                            });
                        }
                        return;
                    }
                    layer.alert('页面路径设置错误', {
                        icon: 2
                    });
                });


                function tabModify(title, data) {
                    if (title) {
                        let tab = $('*[lay-id="' + title + '"]');
                        if (tab.length === 0) {
                            element.tabAdd('docDemoTabBrief', {
                                title: title,
                                content: data, // 支持传入html
                                id: title
                            });
                        }
                        element.tabChange('docDemoTabBrief', title);
                    }
                }
            });
        </script>
    </body>
</html>
